<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>修改文章</title>

  {include file='common/_require'/}
  <link rel="stylesheet" href="/static/css/editor.css">
  <script src="/static/lib/wangEditor/wangEditor.min.js"></script>
  <style>
    .file-item {
      display: flex;
      margin-bottom: 5px;
    }
  </style>
</head>

<body>

  {include file='common/_header'/}
  <div class="layui-container fly-marginTop">
    <div class="fly-panel" pad20 style="padding-top: 5px;">
      <!--<div class="fly-none">没有权限</div>-->
      <div class="">
        <div class="layui-tab layui-tab-brief" lay-filter="user">
          <ul class="layui-tab-title">
            <li class="layui-this">编辑帖子</li>
          </ul>
          <div class="layui-tab-content" style="padding: 20px 0;">
            <div class="layui-tab-item layui-show">
              <div class="layui-row">
                <form action="{:url('update')}" method="POST" lay-filter="post-form" class="layui-form">
                  <input type="hidden" name="id" value="{$post.id}">
                  <div class="layui-col-md9">
                    <fieldset class="layui-elem-field">
                      <legend>内容</legend>
                      <div class="layui-field-box">
                        <div class="layui-form-item">
                          <div class="layui-form-label">标题</div>
                          <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" value="{$post->title}" class="layui-input">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-form-label">话题</div>
                          <div class="layui-input-block">
                            <input type="text" name="topic_title" value="{$post.topic.title|default=''}" class="layui-input">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-form-label">内容</div>
                          <div class="layui-input-block">
                            
                            <div id="editor" class="main-post-content">

                            </div>
                            <div id="content" style="display: none;">{$post->content_html|raw}</div>
                          </div>
                        </div>

                        <div class="layui-form-item">
                          <button class="layui-btn layui-btn-fluid" type="submit" lay-submit lay-filter="save">保存</button>
                        </div>

                      </div>
                    </fieldset>
                  </div>
                  <div class="layui-col-md3">
                    <fieldset class="layui-elem-field sm-form">
                      <legend>信息</legend>
                      <div class="layui-field-box">

                        <div class="layui-form-item">
                          <div class="layui-form-label">封面</div>
                          <div class="layui-input-block">
                            <input type="hidden" name="poster" value="{$post->getData('poster')}">
                            <div>
                              <div class="layui-btn upload-poster">上传</div>
                            </div>
                            <div>
                              <img src="{$post->poster}" class="poster" style="max-width: 120px;max-height: 120px;;" alt="">
                            </div>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-form-label">状态</div>
                          <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="发布">
                            <input type="radio" name="status" value="0" title="草稿">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-form-label">描述</div>
                          <div class="layui-input-block">
                            <textarea name="desc" class="layui-textarea">{$post->getData('desc')}</textarea>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-form-label">分类</div>
                          <div class="layui-input-block ">
                            <select name="category_id">
                              {volist name='list_category' id='category'}
                              <option value="{$category.id}">{$category.title}</option>
                              {/volist}
                            </select>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-form-label">
                            标签
                            <p class="layui-word-aux">空格分隔多个标签</p>
                          </div>
                          <div class="layui-input-block ">
                            <textarea name="tag_text" class="layui-textarea"></textarea>
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <div class="layui-form-label">跳转链接/原文地址</div>
                          <div class="layui-input-block">
                            <input type="text" name="jump_to_url" class="layui-input">
                            <input type="hidden" name="jump_to_url_status" value="1">
                          </div>
                        </div>

                      </div>
                    </fieldset>
                    <fieldset class="layui-elem-field sm-form">
                      <legend>附件</legend>
                      <div class="layui-field-box">
                        <div class="layui-form-item">

                          <div class="layui-input-block">

                            <div>
                              <div class="layui-btn upload-file">上传</div>
                            </div>
                            <div class="files-list" style="margin-top: 15px;">
                              {volist name='$post.files' id='file'}
                              <div class="file-item">
                                <input type="text" class="title" name="files[{$file.save_name}][title]" value="{$file.title}" title="{$file.size}:{$file.save_name}" class="layui-input">
                                <input type="hidden" class="save-name" name="files[{$file.save_name}][save_name]" value="{$file.save_name}">
                                <input type="hidden" class="size" name="files[{$file.save_name}][size]" value="{$file.size}">
                                <div class="layui-btn delete">
                                  删除
                                </div>
                              </div>
                              {/volist}
                            </div>

                          </div>
                        </div>

                    </fieldset>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tpl" style="display: none;">
    <div class="file-item">
      <input type="text" class="title" name="" class="layui-input">
      <input type="hidden" class="save-name" name="">
      <input type="hidden" class="size">
      <div class="layui-btn delete">
        删除
      </div>
    </div>
  </div>
  {include file='common/_footer'/}

  <script>
    var lastUpdateSecond = 0;
    var currentSecond = 0;

    setInterval(() => {
      currentSecond++
    }, 1000);
    layui.use(['form', 'upload', 'laydate'], function () {
      var upload = layui.upload;
      var form = layui.form;
      var laydate = layui.laydate;
      var editor = initWangEditor({
        editorElem:'#editor'
      })
      editor.txt.html($('#content').html())
      upload.render({
        elem: '.upload-file',
        url: '{:url("File/save")}',
        data: {
          type: 'article_files'
        },
        accept: 'file',
        acceptMime: 'application/zip',
        exts: 'zip',
        before: function () {
          layer.load(); //上传loading
        },
        done: function (result) {
          layer.closeAll('loading'); //关闭loading
          if (result.code == 0) {
            layer.msg('上传成功');
            var item = $('.tpl .file-item').clone();

            item.find('.title')
              .attr('name', 'files[' + result.data.save_name + '][title]')
              .attr('title', result.data.file_size + ':' + result.data.file_name)
              .val(result.data.file_name)

            item.find('.save-name')
              .attr('name', 'files[' + result.data.save_name + '][save_name]')
              .val(result.data.save_name)
            item.find('.size')
              .attr('name', 'files[' + result.data.save_name + '][size]')
              .val(result.data.file_size)

            item.appendTo('.files-list')
          } else {
            layer.msg(result.msg)
          }
        }
      })

      $('.files-list').on('click', '.delete', function () {
        $(this).parents('.file-item').remove();
      })
      laydate.render({
        elem: '.publish-time',
        type: 'datetime'
      })

      upload.render({
        elem: '.upload-poster',
        url: '{:url("File/save")}',
        data: {
          type: 5,
          dir: 'article_poster'
        },
        accept: 'images',
        done: function (result) {
          if (result.code == 0) {
            layer.msg('上传成功');
            $('input[name="poster"]').val(result.data.save_name)
            $('.poster').attr('src', result.data.src).show();
          } else {
            layer.msg(result.msg)
          }
        }
      })
      
      form.val('post-form', {
        status: parseInt('{$post->getData("status")}'),
      })

      form.on('submit(save)', function (data) {

        var formData = data.field;

        formData.content_html = editor.txt.html()

        console.log(formData);

        $.post('{:url("update")}', formData, function (result) {

          layer.msg('保存成功')
          setTimeout(() => {
            location.href = result.data.jump_to_url
          }, 1200);
        })

        return false;

      })


    })
  </script>
</body>

</html>